<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="./layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="demoTable">

  <div class="layui-inline">
    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div>
           
<table class="layui-hide" id="test" lay-filter="demo"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
          
<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
 
<script>
 layui.use('table', function(){
  var table = layui.table;

   var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');
      
      //执行重载
      table.reload('testReload', {
        method:'GET',
        url:'http://127.0.0.1/localhost/day10/php/public/index.php/index/Goodz/search',
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          key: {
            name: demoReload.val()
          }
        }
      }, 'data');
    }
  };
  
  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });


  var $=layui.$;

   //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
      if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        // obj.del();
            $.ajax({
                  method:'GET',
                  url:'http://127.0.0.1/localhost/day10/php/public/index.php/index/Goodz/getDel',
                  data:{id:data.goods_id},
                  dataType:'JSON',
                  success:function(){
                      // console.log(res)
                      if(res.code==0){
                           layer.alert(res.msg,function(){
                               location.href=''
                           })
                      }
                  }
            })


        layer.close(index);
      });
    } 
  });


  
  table.render({
    elem: '#test'
    ,url:'http://127.0.0.1/localhost/day10/php/public/index.php/index/Goodz/getLists'
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
      {field:'goods_id', width:120, title: 'ID', sort: true}
      ,{field:'goods_name', width:120, title: '商品名称'}
      ,{field:'goods_hid', width:120, title: '货号', sort: true}
      ,{field:'goods_price', width:120, title: '价格'}
       ,{field:'goods_jia', width:120, title: '上架', sort: true, edit: 'text'}
      ,{field:'goods_sort', width:120, title: '排序'}
       ,{field:'goods_sku', width:120, title: '库存', sort: true}
       ,{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
     
    ]]
    ,id: 'testReload'
    ,page:true
    ,limit: 4
    ,limits:[4,5,6]
     ,parseData: function(res){ //res 即为原始返回的数据
        return {
          "code": res.status, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": res.data.total, //解析数据长度
          "data": res.data.data //解析数据列表
        };
      }
  });
    //监听单元格编辑
  table.on('edit(demo)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    // ,field = obj.field; //得到字段
         $.ajax({
                  method:'GET',
                  url:'http://127.0.0.1/localhost/day10/php/public/index.php/index/Goodz/updat',
                  data:data,
                  dataType:'JSON',
                  success:function(){
                      // console.log(res)
                      if(res.code==0){
                           layer.alert(res.msg,function(){
                               location.href=''
                           })
                      }
                  }
            })


    layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
  });

});
</script>

</body>
</html>